<template lang="jade">
  div.view-wrapper
    el-card
      el-form(:model="person",ref="person")
        el-row(:gutter="20")
          el-col(:span="20")
            div.role-item
              span.role-label 姓名
              el-form-item
                div.input-item-wrapper
                  el-input.no-border(placeholder="请输入姓名")
            div.role-item
              span.role-label 注册邮箱
              el-form-item
                div.input-item-wrapper
                  el-input.no-border(placeholder="请输入邮箱",type="email")
            div.role-item
              span.role-label 密码
              el-form-item
                div.input-item-wrapper
                  el-input.no-border(placeholder="请输入密码",type="password")
            div.role-item
              span.role-label 重复密码
              el-form-item
                div.input-item-wrapper
                  el-input.no-border(placeholder="请再次输入密码",type="password")
            div.role-item(style="padding-bottom:15px;")
              span.role-label 头像
              div.input-item-wrapper
                el-upload(action="https://jsonplaceholder.typicode.com/posts/",list-type="picture-card",:on-preview="handlePictureCardPreview",:on-remove="handleRemove")
                  i.el-icon-plus
            div.role-item
              span.role-label 选择角色
              el-form-item
                div.input-item-wrapper
                  el-select(style="width:30%")
            div.bottom-button-wrapper
              el-button(type="primary",style="width:100px;height:35px;",@click="doSubmit",:loading="loading.status") {{loading.text}}
              el-button(style="width:100px;height:35px;",@click="doCancel") 取消
              |{{result}}
</template>

<script>
  import roleApi from '@/api/role'
  export default {
    name: 'CreateRole',
    data: () => ({
      loadData: false,
      loading: {
        status: false,
        text: '提交'
      },
      result: []
    }),
    mounted () {
      this.getRoleList()
    },
    methods: {
      doSubmit () {

      },
      doCancel () {

      },
      getRoleList () {
        this.loadData = true
        roleApi.getRoleList({
          type: 'Admin'
        }).then(res => {
          this.loadData = false
          if (res.data.data) {
            this.result = []
            res.data.data.forEach(item => {
              this.result.push(item)
            })
          }
        }, err => {
          this.$message({
            type: 'error',
            message: err.response.data.message
          })
        })
      },
      doReset () {
        this.$refs.person.resetFields()
        this.loading.status = false
        this.loading.text = '提交'
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";

  .role-item{
    border-bottom: 1px solid #dcdfe6;
    margin-top: 15px;
    &:first-child{
      margin-top: 0px;
    }
  }

  .role-label{
    font-size: 16px;
    display: block;
    height: 30px;
    line-height: 30px;
    color: $font-color;
    margin-bottom: 10px ;
  }

  .role-label-text{
    font-size: 18px;
    margin-left: 40px;
    color: $font-color;
  }
  .role-block{
    margin-top: 30px;
    height: 50px;
    display: block;
    width:100%;
  }

  .input-item-wrapper{
    width:100%;
    padding-left: 25px;
  }

  .bottom-button-wrapper{
    margin-top: 25px;
    padding-left: 20px;
  }

</style>
